

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 今日数据</span>
      </div>
      <div style="margin-top: 40px">
        <el-row :gutter="15">
          <el-col :span="7" style="text-align: center">
            <img src="@/assets/img/today.png" style="width: 100px">
          </el-col>
          <el-col :span="15" >
            <div style="color: rgba(79, 166, 247, 1);height:auto;font-size: 20px;line-height: 28px"><span>新增会员:</span>
              <span style="margin-left:5px">
              <count-up :end-val="50" style="display: inline-block;font-size: 30px;color: rgba(28, 219, 254, 1);font-weight: 700"></count-up></span><span> 个</span></div>
            <div style="color: rgba(79, 166, 247, 1);height:auto;font-size: 20px;line-height: 28px"><span>新增订单数:</span><span style="margin-left: 5px"> <count-up :options="{'useGrouping':false}" :end-val="2152" style="display: inline-block;font-size: 30px;color: rgba(13, 222, 156, 1);font-weight: 700"></count-up></span> <span> 单</span></div>
            <div style="color: rgba(79, 166, 247, 1);height:auto;font-size: 20px;line-height: 28px;"><span>新增金额数:</span><span style="margin-left: 5px"><count-up :options="{'useGrouping':false}" :end-val="13452" style="display: inline-block;font-size: 30px;color: rgba(228, 196, 49, 1);font-weight: 700"></count-up></span><span> 元</span></div>
            </el-col>
        </el-row>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
import CountUp from 'vue-countup-v3'
let chart = null
export default {
   components:{
     CountUp
   }
}

</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 170px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
